<template>
  <div>
    <div class="gva-search-box">
      <el-form
        ref="searchForm"
        :inline="false"
        label-width="120"
        :rules="rules"
        :model="searchInfo"
      >
        <el-form-item label="骑手所需付费" prop="rider_cost">
          <el-input v-model="searchInfo.rider_cost" placeholder="骑手所需费用" />
        </el-form-item>
        <el-form-item label="网点所需付费" prop="station_cost">
          <el-input v-model="searchInfo.station_cost" placeholder="网点所需付费" />
        </el-form-item>
        <el-form-item label="商家月卡" prop="merchant_monthly_card">
          <el-input v-model="searchInfo.merchant_monthly_card" placeholder="商家月卡" />
        </el-form-item>
        <el-form-item label="商家半年卡" prop="merchant_half_card">
          <el-input v-model="searchInfo.merchant_half_card" placeholder="商家半年卡" />
        </el-form-item>
        <el-form-item label="商家年卡" prop="merchant_annual_card">
          <el-input v-model="searchInfo.merchant_annual_card" placeholder="商家年卡" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit(searchForm)">保存</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { financialAdd } from "@/api/subscribe";
import { ElMessage } from "element-plus";
const rules = ref({
  rider_cost: [
    { required: true, message: "请输入骑手所需付费", trigger: "blur" }
  ],
  station_cost: [
    { required: true, message: "请输入网点所需付费", trigger: "blur" }
  ],
  merchant_monthly_card: [
    { required: true, message: "请输入商家月卡", trigger: "blur" }
  ],
  merchant_half_card: [
    { required: true, message: "请输入商家半年卡", trigger: "blur" }
  ],
  merchant_annual_card: [
    { required: true, message: "请输入商家年卡", trigger: "blur" }
  ]
});
const searchInfo = ref({
  rider_cost: "",
  station_cost: "",
  merchant_monthly_card: "",
  merchant_half_card: "",
  merchant_annual_card: ""
});
const searchForm = ref();

onMounted(() => {
  getDetail();
})

const getDetail = () => {
  financialAdd().then(response => {
    if (response.code === 200) {
      searchInfo.value = { ...response.data };
    }
  });
};
const onSubmit = searchForm => {
  let params = {
    rider_cost: searchInfo.value.rider_cost
      ? Number(searchInfo.value.rider_cost)
      : "",
    station_cost: searchInfo.value.station_cost
      ? Number(searchInfo.value.station_cost)
      : "",
    merchant_monthly_card: searchInfo.value.merchant_monthly_card
      ? Number(searchInfo.value.merchant_monthly_card)
      : "",
    merchant_half_card: searchInfo.value.merchant_half_card
      ? Number(searchInfo.value.merchant_half_card)
      : "",
    merchant_annual_card: searchInfo.value.merchant_annual_card
      ? Number(searchInfo.value.merchant_annual_card)
      : ""
  };
  console.log(searchForm.value);
  searchForm.validate(async valid => {
    if (valid) {
      financialAdd(params).then(response => {
        if (response.code === 200) {
          ElMessage({
            message: "设置成功",
            type: "success"
          });
        }
      });
    }
  });
};
</script>
<style lang="scss" scoped>
.gva-search-box {
  .el-form {
    width: 60%;
  }
}
</style>